<template>
	<view>
		<!-- 轮播图 -->
		<carousel :img-list="imgList" url-key="image_text" @selected="selectedBanner" />
		<!-- 轮播图结束 -->

		<!-- 置顶开始 -->
		<div class="stick justify-content_center">
			<div class="stick_content justify-content_between">
				<div class="stick_left">
					<div class="stick_left_img">
						<image :src="is_top.image" mode=""></image>
					</div>
					<div class="stick_left_text justify-content_between">
						<div class="youxi">{{is_top.name}}</div>
						<div class="jianjie">{{is_top.describe}}</div>
					</div>
				</div>
				<!-- 圆形进度条 -->
				<u-circle-progress active-color="#ea5543" :percent="score1" bg-color="#fff" :width="100"
					border-width="10">
					<view class="u-progress-content">
						<text class='u-progress-info'>{{is_top.score}}</text>
					</view>
				</u-circle-progress>
			</div>
		</div>
		<!-- 置顶结束 -->

		<!-- 即将上市开始 -->
		<div class="market padding">
			<div class="market_title justify-content_between">
				<div class="market_title_left align-items_center">
					<image src="../../static/game/jjss.png" mode=""></image>
					<text>即将上市</text>
				</div>
				<div class="market_title_right align-items_center">
					<text>更多</text>
					<image src="../../static/icon_grzx.png" mode=""></image>
				</div>
			</div>
			<!-- 即将上市轮播图 -->
			<swiper class="swiper swiper_one">
				<swiper-item v-for="item in gameBanner" :key="item.id">
					<view class="swiper-item swiper-two">
						<image :src="item.images_list" mode=""></image>
						<div class="swiper-three align-items_center">
							<p>{{item.name}}</p>
							<p>{{item.time}}</p>
						</div>
					</view>
				</swiper-item>
			</swiper>
		</div>

		<!-- 即将上市结束 -->

		<!-- 圈子开始 -->
		<div class="circle padding">
			<div class="circle_title justify-content_between">
				<div class="circle_title_left">
					圈子
				</div>
				<div class="circle_title_right">
					<text>全部</text>
					<image src="../../static/icon_grzx.png" mode=""></image>
				</div>
			</div>
			<!-- 圈子内容 -->
			<div class="circle_content" v-for="(item,i) in gameList" :key="i">
				<!-- 游戏名称跟加入人数 -->
				<div class="circle_content_hint">
					<div class="game_name align-items_center">
						<image src="../../static/game/game.png" mode=""></image>
						<text>{{item.name}}</text>
					</div>
					<div>{{item.follow_num}}人已加入</div>
				</div>
				<!-- 游戏图片 -->

				<div class="game_image justify-content_between">
					<div class="flex_image" v-for="(item1,i) in item.images_text">
						<image :src="item1" mode=""></image>
					</div>
				</div>
			</div>
		</div>
		<!-- 圈子结束 -->



	</view>
</template>

<script>
	import carousel from '@/components/vear-carousel/vear-carousel'
	export default {
		components: {
			carousel
		},
		data() {
			return {
				imgList: [], // 轮播图数据
				advertising: {}, // 广告
				is_top: {}, // 置顶
				gameBanner: [], // 即将上市
				gameList: [], // 游戏
				score1: 0,
				pageindex: 1, // 当前页数
				pagesize: 3 // 每页条数
			};
		},
		onLoad() {
			this.dataList() //获取游戏页面数据
		},
		// 侦听器
		watch: {

		},
		// 计算属性
		computed: {},
		// 下拉刷新
		onPullDownRefresh() {
			this.imgList = []
			this.advertising = {}
			this.is_top = {}
			this.gameBanner = []
			this.gameList = []
			this.dataList() //获取游戏页面数据
		},
		// 分页
		onReachBottom() {
			this.gamesmore()
		},
		methods: {
			//获取游戏页面数据
			dataList() {
				this.$api.request(this.$api.urls.games, {}, 'get').then(res => {
					this.imgList = res.data.slider //轮播图
					this.is_top = res.data.is_top // 置顶
					this.score1 = Number(this.is_top.score) * 10
					this.is_top.image = res.data.is_top.images_text[0]
					this.gameList = res.data.games // 游戏
					this.gameBanner = this.gameBannerFunction(res.data.is_list) // 即将上市
					uni.stopPullDownRefresh();
				})
			},
			// 轮播图点击事件
			selectedBanner(item, index) {
				console.log(item)
				console.log(index)
			},
			//   即将上市数据添加
			gameBannerFunction: function(is_list) {
				for (var i = 0; i < is_list.length; i++) {
					if (is_list[i].images_text.length > 0) {
						is_list[i].images_list = is_list[i].images_text[0] // 获取即将上市图片
						is_list[i].time = this.formatDate(is_list[i].pushtime * 1000) // 获取即将上市时间
					}
				}
				return is_list
			},
			//年月日格式封装
			formatDate: function(value) {
				var date = new Date(value);
				var y = date.getFullYear();
				var MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				return y + '年' + MM + '月' + d + '日'; // 返回年月日
			},
			// 圈子分页
			gamesmore() {
				this.$api.request(this.$api.urls.gamesmore, {
					page: this.pageindex,
					pagesize: this.pagesize
				}, 'get').then(res => {
					this.gameList = this.gameList.concat(res.data)
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		font-size: 14rpx;
	}

	.stick {
		width: 100%;
		height: 140rpx;

		.stick_content {
			width: 90%;
			height: 100%;
			padding: 0 20rpx;
			border-radius: 16rpx;
			box-shadow: 0 0 4px rgba(102, 102, 102, 0.1);

			.stick_left {
				display: flex;

				.stick_left_img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
				}

				.stick_left_img image {
					border-radius: 12rpx;
				}

				.stick_left_text {
					width: 60%;
					margin-left: 20rpx;
					color: #979797;
					flex-direction: column;

					.youxi {
						width: 100%;
						color: #000;
						font-weight: 700;
						font-size: 26rpx;
					}

					.jianjie {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 1;

					}
				}
			}

		}
	}

	// 即将上市开始
	.market {
		margin-top: 20rpx;


		.market_title {
			height: 80rpx;


			.market_title_left {
				font-size: 30rpx;
				font-weight: 800;
				color: #343434;

			}

			.market_title_left image {
				width: 40rpx;
				height: 56rpx;
				margin-right: 10rpx;
			}

			.market_title_right {
				height: 100%;
				color: #979797;
			}

			.market_title_right image {
				width: 20rpx;
				height: 20rpx;
				margin-left: 13rpx;
			}
		}

		// 即将上市轮播图




		.swiper_one {
			height: 420rpx;
		}

		.swiper-two {
			width: 200rpx;
			height: 420rpx;
		}

		.swiper-three {
			flex-direction: column;
		}

		.swiper-item image {
			width: 200rpx;
			height: 320rpx;
			border-radius: 8rpx;
		}
	}

	// 即将上市结束

	// 圈子开始
	.circle {
		.circle_title {
			margin: 30rpx 0;
			padding: 20rpx 0;

			.circle_title_left {
				position: relative;
				font-weight: 700;
				font-size: 30rpx;
			}

			.circle_title_left::before {
				position: absolute;
				bottom: -20%;
				left: 50%;
				transform: translateX(-50%);
				content: "";
				width: 30rpx;
				height: 6rpx;
				background-color: #000;
				border-radius: 2rpx;
			}

			.circle_title_right {
				color: #979797;
			}

			.circle_title_right image {
				width: 20rpx;
				height: 20rpx;
				margin-left: 13rpx;
			}
		}

		// 圈子内容
		.circle_content {
			margin-top: 50rpx;
			padding-bottom: 20rpx;

			// 游戏名称跟加入人数
			.circle_content_hint {
				color: #979797;
				margin-bottom: 20rpx;

			}

			.circle_content_hint image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}

			.game_name {
				margin-bottom: 20rpx;
				font-weight: 700;
				font-size: 28rpx;
				color: #343434;
			}

			// 游戏图片
			.game_image {
				width: 100%;
				height: 200rpx;

				.flex_image {
					width: 30%;
					height: 100%;
				}

				.flex_image image {
					border-radius: 16rpx;
				}
			}

		}

	}

	// 圈子结束

	// 圆形进度条

	.uni-swiper-slide-frame {
		width: 50% !important;
	}

	.u-progress-content {
		width: 95rpx;
		height: 95rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #ed775f;

	}

	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx;
		color: #fff;
		margin-right: 13rpx;
	}
</style>
